<template>
	<div v-loading='loading'>
		<div class="Legend">
			<!--<ul>
				<li style="background:#2f80e7;">
				</li>
				<li style="background:#564aa3;">
				</li>
				<li style="background:#2b957a;">
				</li>
			</ul>-->
		</div>
		<div class="echar clearfix">
			<div class="left clearfix">
				<div id="bar" class="bar fl"></div>
				<div id="cir" class="cir fr"></div>
			</div>
			<!--<div class="right">-->
			<!--<span>最新设备日志</span>
				<el-table :data="tableData" stripe style="width: 100%">
					<el-table-column prop="cNum" label="设备ID">
					</el-table-column>
					<el-table-column prop="cardType" label="设备名称">
					</el-table-column>
					<el-table-column prop="cName" label="设备编号">
					</el-table-column>
					<el-table-column prop="cName" label="时间">
					</el-table-column>
					<el-table-column prop="State" label="日志内容">
					</el-table-column>
				</el-table>-->
			<!--</div>-->
		</div>
	</div>
</template>
<script>
	// 引入 ECharts 主模块
	const echarts = require("echarts/lib/echarts");
	// 引入柱状图
	require("echarts/lib/chart/bar");
	require("echarts/lib/chart/line");

	// 引入饼图
	require("echarts/lib/chart/pie");
	// 引入提示框和标题组件
	require("echarts/lib/component/tooltip");
	require('echarts/lib/component/legend')
	require("echarts/lib/component/title");
	import api from "../axios/api";
	export default {
		name: "index",
		data() {
			return {
				loading: false,
				region: [],
				proValue: "",
				options: [],
				regions: [],
				tableData: [{
					cNum: 10012,
					cardType: '员工卡',
					cName: '张三',
					State: '正常'
				}, {
					cNum: 10012,
					cardType: '员工卡',
					cName: '张三',
					State: '正常'
				}], //卡片列表
				BMap: [], //饼图数据
				YieldMap: [], //走势图
			};
		},
		mounted() {
			this.homeGetlist()
		},
		methods: {
			//获取数据
			homeGetlist() {
				this.loading = true
				this.$post(api.homeGetlist).then(res => {
					if(res.state == 200) {
						this.BMap = res.data.BMap
						this.YieldMap = res.data.YieldMap
						this.loading = false
						if(!this.YieldMap.Series.length==0){
							this.drawLine(this.YieldMap)
						}
						if(!this.BMap.length==0){
							this.fnPie()
						}
						
					} else {
						this.loading = false
						this.BMap = [], //饼图数据
						this.YieldMap = [], //走势图
						this.fnPie()
						this.drawLine()
						
						this.$message.error(res.msg);
					}
				})
			},
			fnPie() {
				var khName = []
				var khNames = []
				for(var i = 0; i < this.BMap.length; i++) {
					khName.push({
						name: this.BMap[i].PorceName,
						value: this.BMap[i].Ratio
					})
					khNames.push(this.BMap[i].PorceName, )

				}
				var myCir = echarts.init(document.getElementById("cir"));
				myCir.setOption({
					title: {
						text: "工艺占比图",
						x: "center",
						y: 15
					},
					tooltip: {
						trigger: "item",
						formatter: "{a} <br/>{b} :({d}%)"
					},
					legend: {
						orient: "vertical",
						left: '3%',
						top: '2%',
						data: khNames
					},
					series: [{
						name: "工艺占比",
						type: "pie",
						radius: "55%",
						center: ["50%", "60%"],
						data: khName,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: "rgba(0, 0, 0, 0.5)"
							}
						}
					}]
				});
			},
			dedupe(array) {
				return Array.from(new Set(array));
			},
			drawLine(YieldMap) {
//				var $this = this
//				var proName = [];
				var proNum = [];
//				var tooltips = [];
				var serie = [];
				var maix = 0
				console.log(YieldMap)
				for(var i = 0; i < YieldMap.Series.length; i++) {
					serie.push({
						name: YieldMap.Series[i].Name,
						type: 'line',
						data: YieldMap.Series[i].Data
					})
					proNum = proNum.concat(YieldMap.Series[i].Data)
				}
				maix = parseInt(Math.max.apply(null, proNum) + 20)
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('bar'))
				// 绘制图表
				myChart.setOption({
					title: {
						text: '工艺规格TOP10 走势图',
						x: "center",
						y: 20
					},
					tooltip: {
						trigger: 'axis',
					},
					legend: {
						orient: "vertical",
						left: '3%',
						top: '2%',
						data: YieldMap.Legend
					},
					xAxis: {
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},
						data:YieldMap.xAxis
					},
					grid: {
						left: '10%',
						right: '4%',
						top: '18%',
						bottom: '13%',
						containLabel: false
					},
					yAxis: {
						type: "value",
						max: maix,
						axisLabel: {
							formatter: "{value}"
						}
					},
					series: serie,
//					color: '#6ca8e3'
				});
			}

		}
	};
</script>
<style scoped>
	.Legend {
		width: 100%;
		/*min-width: 1193px;*/
	}
	
	.Legend ul {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 20px 0;
	}
	
	.Legend ul li {
		width: 32%;
		height: 94px;
		/* padding: 5px; */
		box-sizing: border-box;
		border-radius: 5px;
		color: #ffffff;
	}
	
	.echar .bar {
		width: 59%;
		height: 500px;
		box-sizing: border-box;
		border-radius: 5px;
		border: 1px solid #d1dce3;
		border-top: 3px solid #d1dce3;
		background: #fff;
	}
	
	.echar .cir {
		background: #fff;
		width: 39%;
		height: 500px;
		box-sizing: border-box;
		border-radius: 5px;
		border: 1px solid #d1dce3;
		border-top: 3px solid #d1dce3;
		/* margin-right: 1%; */
	}
	
	.echar .right {
		background: #fff;
		width: 100%;
		box-sizing: border-box;
		border-radius: 5px;
		padding: 10px;
		border: 1px solid #d1dce3;
		border-top: 3px solid #d1dce3;
		margin-top: 20px;
		padding-bottom: 20px;
	}
	
	.echar .right span {
		width: 100%;
		display: inline-block;
		text-align: center;
		font-weight: 600;
		font-size: 20px;
		padding-bottom: 10px;
		margin-top: 20px;
	}
</style>